<template>
	<view class="page">
		<view class="searchInput" @click="goPage('/pages/tabShop/searchGoods/searchGoods')">
				<view class="input">
					<u-search :show-action="false" placeholder="请输入商品关键词搜索" bg-color="#fff" v-model="keyword" @search="searchGoods" shape="round"></u-search>
				</view>
		</view>
		
			<view class="swiper">
					<u-swiper :list="swiperArr" name="adv_image"></u-swiper>
			</view>
			<view class="typeArr">
				<view class="typeArrItem" v-for="(item,index) in typeArr" :key="index" @click="goShopType(item.id,item.name)">
					<view class="img">
						<u-image  mode="widthFix"  width="77" height="77" lazy-load :src="item.image" :fade="true" duration="450">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</view>
					<text>{{item.category_name}}</text>
				</view>
			</view>
			
			<view class="selectBox">
				<view class="selectTitle">
					超值精选
				</view>
				<scroll-view scroll-x style="width: 700rpx;">
					<view class="selectArr">
						<view class="goodsArrItem" v-for="(item,index) in selectList" :key="index" @click="junit('/pages/tabShop/goodsDetail/goodsDetail' , {id: item.sku_id})">
							<view class="cover">
								<u-image    width="208" height="208" lazy-load :src="item.goods_image" :fade="true" duration="450">
									<u-loading slot="loading"></u-loading>
								</u-image>
							</view>
									
							<view class="info">
								{{item.goods_name}}
							</view>
							<view class="desc">
								<text class="price">￥{{item.price}}</text>
								<text class="oldPrice">{{item.market_price}}</text>
							</view>
							
						</view> 
					</view>
				</scroll-view>
				
			</view>
			
			<!-- 推荐商品 -->
			<view class="recommendTitle">
				— 为你推荐 —
			</view>
			<view class="goodsArr">
				<view class="goodsArrItem" v-for="(item,index) in recommendGoodsList" :key="index" @click="junit('/pages/tabShop/goodsDetail/goodsDetail' , {id: item.sku_id})">
					<view class="cover">
						<u-image    width="344" height="352" lazy-load :src="item.goods_image" :fade="true" duration="450">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</view>
			
					<view class="info">
						{{item.goods_name}}
					</view>
					<view class="desc">
						<text class="price">￥{{item.price}}</text>
						<text>已售{{item.sale_num}}</text>
					</view>
					<view class="jifen">
						送{{item.point}}积分
					</view>
				</view> 
			</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeArr:[],
				recommendGoodsList:[],
				page: 1 ,
				swiperArr:[],
				keyword:'',
				selectList:[ ],
			};
		},
		onLoad() {
			this.keyword = uni.getStorageSync('keyword')
			this.init()
		},
		methods:{
			searchGoods(value){
				console.log(value);
			},
			goShopType(id,typeName){
				uni.setStorageSync('shopTypePageTotle',typeName)
				this.junit('/pages/tabShop/goodsType/goodsType' , {id})
			},
			// scrolltolower(){
			// 	console.log('触底了');
			// 	this.page++;
			// 	this.getGoodArr()
			// },
			init(){
				this.getShopType()
				this.getRecommendGoodsList()
				this.getSwiper()
				this.getSelectList()
			},
			getShopType(){
				this.myHttp({
					url:'/api/goodscategory/tree',
				}).then((res)=>{
						this.typeArr = res.data
				})
			},
			getSwiper(){
				this.myHttp({
					url:'/api/Adv/detail',
					data:{
						keyword: 'APP_SHOP'
					}
				}).then((res)=>{
						this.swiperArr = res.data.adv_list
				})
			},
			getRecommendGoodsList(){
				this.myHttp({
					url:'/api/goodssku/pagecomponents',
					data:{
						page: 1,
						page_size: "",
					}
				}).then((res)=>{
						this.recommendGoodsList = res.data.list
				})
			},
			getSelectList(){
				this.myHttp({
					url:'/api/goodssku/pageSelected',
					data:{
						page: 1,
						page_size: "",
					}
				}).then((res)=>{
						this.selectList = res.data.list
				})
			},
		},
		components:{
		},
		filters:{
			
		},
	}
</script>

<style lang="scss" scoped>
.page{
	width: 100%;
	background-color: #F2F2F2;
	.searchInput{
		width: 100%;
		@include flexCenter;
		padding: 20rpx 0;
		.input{
			@include flexCenter;
			width: 700rpx;
			height: 68rpx;
			background: #FFFFFF;
			border-radius: 28rpx;

		}
	}
	.swiper{
		height: 276rpx;
		width: 700rpx;
		border-radius: 10rpx;
		margin: auto;
	}
	.typeArr{
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		padding: 40rpx 0;
		.typeArrItem{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 20%;
			.img{
				width: 77rpx;
				height: 77rpx;
				border-radius: 50%;
				margin-bottom: 10rpx;
				margin-top: 10rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	
	.selectBox{
		width: 700rpx;
		height: 435rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 30rpx auto 0;
			.selectTitle{
				height: 80rpx;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
			}
			.selectArr{
				display: flex;
				padding: 0 23rpx;
				width: 600rpx;
				.selectTitle{
					
				}
				.goodsArrItem{
					width: 208rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
					margin-top: 15rpx;
					margin-right: 23rpx;
					@include flexCol;
					.cover{
						width: 208rpx;
						height: 208rpx;
						border-radius: 10rpx;
					}
					.info{
						flex: 1;
						font-size: 23rpx;
						color: #000;
						margin: 15rpx 10rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.desc{
						flex: 1;
						color: #A8A8A8;
						font-size: 22rpx;
						@include flexBetween(0rpx 20rpx);
						.price {
							font-size: 26rpx;
							color: #E9612B;
						}
						.oldPrice{
							text-decoration: line-through;//中划线
						}
					}
				}
			}
		
	
	}
	
	
	.recommendTitle{
		height: 113rpx;
		width: 100%;
		@include flexCenter;
		font-size: 35rpx;
		color: #000000;
		font-weight: 600;
		
	}
	.goodsArr{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			background-color: #F5F5F5;
			padding: 0rpx 25rpx 50rpx;
			.goodsArrItem{
				width: 344rpx;
				// height: 574rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				margin-top: 15rpx;
				@include flexCol;
				.cover{
					height: 352rpx;
					width: 344rpx;
					border-radius: 10rpx 10rpx 0 0;
				}
				image{
					height: 352rpx;
					width: 344rpx;
					border-radius: 10rpx 10rpx 0 0;
				}
				.info{
					flex: 1;
					font-size: 23rpx;
					color: #000;
					margin: 20rpx 10rpx;
					display: -webkit-box;    
					-webkit-box-orient: vertical;    
					-webkit-line-clamp: 2;    
					overflow: hidden;
				}
				.desc{
					flex: 1;
					color: #A8A8A8;
					font-size: 22rpx;
					@include flexBetween(0rpx 20rpx);
					.price {
						font-size: 26rpx;
						color: #E9612B;
					}
				}
				.jifen{
					width: 206rpx;
					height: 36rpx;
					background: #FCF1E0;
					border-radius: 18rpx;
					font-size: 22rpx;
					@include flexCenter;
					margin: 10rpx  10rpx 20rpx;
					color: #CFA972;
				}
			}
	}
}
</style>
